
import React from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity, Dimensions
} from 'react-native'

import Icon from 'react-native-vector-icons/Ionicons'

let width = Dimensions.get('window').width;  //获取屏幕的宽度

const Header = React.createClass({
  getInitialState() {
    //背景色，默认#ee735c
    let bgColor = this.props.bgColor;
    bgColor = bgColor === undefined ? '#ee735c' : bgColor;

    //字体色，默认#fff
    let color = this.props.color;
    color = color === undefined ? '#fff' : color;

    //是否有返回，默认false
    let isBack = this.props.isBack;
    isBack = isBack === undefined ? false : isBack;

    return {
      bgColor: bgColor,
      color: color,
      isBack: isBack
    };
  },

  //返回
  _pop(){
    this.props.navigator.pop();
  },

  render() {
    return (
      <View style={[styles.header,{backgroundColor:this.state.bgColor}]}>
        {
          this.state.isBack ?
            <TouchableOpacity onPress={this._pop} style={styles.backBox}>
              <Icon name="ios-arrow-back" size={28} style={styles.backIcon} />
              <Text style={styles.backText} numberOfLines={1}>返回</Text>
            </TouchableOpacity>
            : null
        }
        <Text style={[styles.headerText,{color:this.state.color}]}>{this.props.title}</Text>
      </View>
    )
  }
});

const styles = StyleSheet.create({
  /*头部样式*/
  header: {
    width: width,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 20,
    paddingLeft: 10,
    paddingRight: 10,
    height: 64,
    borderBottomWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.1)'
  },
  headerText: {
    fontSize: 20,
    textAlign: 'center',
    width: width - 150,
  },

  /*返回样式*/
  backBox: {
    position: 'absolute',
    top: 15,
    padding: 10,
    left: 5,
    width: 60,
    flexDirection: 'row',
    alignItems: 'center',
  },
  backText: {
    color: '#999',
  },
  backIcon: {
    color: '#999',
    top: 2,  /*图标上下有一点不对称，所以加了top:2*/
    marginRight: 5,
  },

});

module.exports = Header